<template>
    <div class = "search-container">
        <van-popup :close-on-click-overlay="false" v-model="isShow" position="top" :style="{ height: '50%' }">
            <van-search @search="onSearch" @cancel="$router.back()" v-model="value" show-action placeholder="请输入搜索关键词" />

            <div class="searchWrap">
                <div class="card">
                    <div class="header" v-if="historyData.length > 0">
                        <h3>搜索历史</h3>
                        <i  class="iconfont icon-trash" @click="clearHistory"></i>
                    </div>
                    <div class="footer">
                        <span v-for="(item,index) in historyData" :key="index" 
                        @click="$router.push('/search-result/' + item)">{{ item }}</span>
                    </div>

                </div>
                <van-divider />
                <div class="card">
                    <div class="header">
                        <h3>热门搜索</h3>
                        <!-- 方式一 -->
                        <!-- <i :class="['iconfont',isEyeOpen?'icon-yanjing':'icon-guanbi-yanjing']" 

                        @click="isEyeOpen=!isEyeOpen"></i> -->
                         <!-- 方式二：推荐 -->
                        <i :class="['iconfont',className]" @click="isEyeOpen=!isEyeOpen"></i>
                    </div>
                    <div v-if="isEyeOpen" class="footer">
                        <span v-for="(item,index) in hotsData" :key="index" 
                        @click="$router.push('/search-result/' + item)">{{ item }}</span>
                    </div>
                    <div v-else class="text-center">已隐藏热门搜索</div>
                </div>


            </div>

        </van-popup>
    </div>
</template>